<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Simple Data</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/zTree_v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/zTree_v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/zTree_v3/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/zTree_v3/js/jquery.ztree.exedit.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script>


    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            view: {
                <!--addHoverDom: addHoverDom,-->
                <!--removeHoverDom: removeHoverDom,-->
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: false
            },
            callback:{
                beforeCheck : true,
                onCheck : onCheck

            }
        };

        var zNodes = ${menuList};


        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        //后缀增加 新增、修改、删除 三个功能
        <!--var newCount = 1;-->
        <!--function addHoverDom(treeId, treeNode) {-->
            <!--var sObj = $("#" + treeNode.tId + "_span");-->
            <!--if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;-->
            <!--var addStr = "<span class='button add' id='addBtn_" + treeNode.tId-->
                <!--+ "' title='add node' onfocus='this.blur();'></span>";-->
            <!--sObj.after(addStr);-->
            <!--var btn = $("#addBtn_"+treeNode.tId);-->
            <!--if (btn) btn.bind("click", function(){-->
                <!--var zTree = $.fn.zTree.getZTreeObj("treeDemo");-->
                <!--zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});-->
                <!--return false;-->
            <!--});-->
        <!--};-->
        <!--function removeHoverDom(treeId, treeNode) {-->
            <!--$("#addBtn_"+treeNode.tId).unbind().remove();-->
        <!--};-->



        //checkbox 点击事件
        function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            ids="";
            for(var i=0;i<nodes.length;i++){
                <!--v+=nodes[i].name + ",";-->
                <!--console.log("节点id:"+nodes[i].id+"节点名称"+v); //获取选中节点的值-->
                if(i == (nodes.length -1))
                {
                    ids = ids + nodes[i].id;
                    break;
                }
                ids = ids + nodes[i].id + ",";

            }
            $("#mids").val(ids);
        }


        //-->
    </SCRIPT>
</HEAD>

<BODY STYLE="background-color:#F0F6E4;">
<div style="padding:10px;">
    <h1>角色名称：${role.roleName}</h1>
</div>
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
<div class="content_wrap" style="width:100%; height:100%;">
    <div class="zTreeDemoBackground left"  style="width:100%; height:100%;">
        <ul id="treeDemo" class="ztree"  style="width:100%; height:100%; border:0px;"></ul>
    </div>
</div>

<form id="myForm" action="/role/editMenuRole" method="post">
    <input id="mids" name="mids" type="text" value="${mids}"/>
    <input name="rid"  type="text" value="${role.id}"/>

</form>
<a href="/role/editMenuRolePage?id=${role.id}">刷新</a>

<div>
    <button id="myButton" type="button" class="btn btn-primary">Submit - 提交</button>&nbsp;&nbsp;
    <a href="/role/listPage"><button id="backButton" type="button" class="btn btn-default">返 回</button></a>
</div>
<div id="msgDiv" style="float:left;color:red;padding-left:10px;"></div>




<script>
$("#myButton").click(function(){
    $("#myForm").ajaxSubmit({
			success: function (data) {
				if (data.resCode == 1){
					$("#msgDiv").text(data.resMsg);
				}
			},
			error: function () {
				$("#msgDiv").text("系统出现错误，请联系管理员");
			}
		});
});

</script>
</BODY>
</HTML>